<template>
    <div class="configBox">
        <!-- {{ timelineStore.current }} -->
        <n-tabs type="line" animated v-if="timelineStore.current">
            <n-tab-pane name="基础信息" tab="基础信息">
                <BaseInfoConfig></BaseInfoConfig>
            </n-tab-pane>
            <n-tab-pane name="基本参数" tab="基本参数">
                <BaseDataConfig></BaseDataConfig>
            </n-tab-pane>
            <n-tab-pane name="动画参数" tab="动画参数">
                <AnimateConfig></AnimateConfig>
            </n-tab-pane>
        </n-tabs>
        <div v-if="!timelineStore.current">选择时间轴上对象，进行属性编辑</div>
    </div>
</template>
<script setup lang="ts">
import AnimateConfig from "./ConfigCom/AnimateConfig.vue"
import BaseInfoConfig from "./ConfigCom/BaseInfoConfig.vue"
import BaseDataConfig from "./ConfigCom/BaseDataConfig.vue"
import { NTabs, NTabPane } from "naive-ui"
import { useTimelineStore } from "../store/timeline"
const timelineStore = useTimelineStore()
</script>
<style scoped>
.configBox {
    background: var(--color-bg-2);
    color: var(--color-text-1);
    font-size: 12px;
    height: 100%;
    overflow: auto;
}
</style>